/*
 * @Author: luoqi
 * @Date: 2022-03-30 18:44:39
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-27 16:28:34
 * @Description: 
 */
import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Select, Radio, Upload, message } from 'antd';
import { UploadOutlined, CheckOutlined } from '@ant-design/icons';

import { connect } from 'react-redux'
import {delTab,changeActive} from '../../store/tabAction'

import axios from '../../utils/axios'
import qs from 'qs'
import PubSub from 'pubsub-js'
const { Option } = Select;
const { TextArea } = Input;


const Adddisease = (props) => {
  //分类树
  const { departmentTree, partTree } = props.types;

  //部位联动选择器
  const [posFirst, setPosFirst] = React.useState(partTree[0].id);
  const [posList, setPosList] = React.useState(partTree[0].children);
  const [posSecond, setPosSecond] = React.useState(posList[0].id);
  //科室联动选择器
  const [depFirst, setDepFirst] = React.useState(departmentTree[0].id);
  const [depList, setDepList] = React.useState(departmentTree[0].children);
  const [depSecond, setDepSecond] = React.useState(depList.length > 0 && depList[0].id);


  //上传图片
  const [imgUrl, setImgUrl] = useState()

  //上传疾病
  const onFinish = (values) => {
    console.log(posFirst, posSecond)
    console.log(depFirst, depSecond)
    console.log('Success:', values);

    let tag = partTree.find(item => item.id == posFirst).name + ',' + partTree.find(item => item.id == posFirst).children.find(item => item.id == posSecond).name + ',' + departmentTree.find(item => item.id == depFirst).name + ',' + departmentTree.find(item => item.id == depFirst).children.find(item => item.id == depSecond).name
    
    axios({
      url: '/sickness/upsert',
      method: 'post',
      data: qs.stringify({
        departmentId: depSecond,
        departmentPid: depFirst,
        introduce: values.profile,
        name: values.disName,
        imgUrl: imgUrl,
        partId: posSecond,
        partPid: posFirst,
        status: values.status == 1 ? true : false,
        tag: tag
      }),
    }).then(res => {
      console.log(res);
      if (res.code === '200') {
        //添加疾病详情
        axios({
          url: '/sicknessDetail/upsert',
          method: 'post',
          data: qs.stringify({
            sicknessId:res.data.id,
            cause:values.etiology,//疾病病因
            prevent:values.prevention,//疾病预防
            symptom:values.symptom,//疾病症状
            tips:values.tip//疾病贴士
          }),
        }).then(res => {
          console.log(res);
          if (res.code === '200') {
             //提示
            message.success('添加成功');
            //删除标签栏
            props.delTab('addDisease')
            //激活父页面
            props.changeActive('disease')
            //更新父页面
            PubSub.publish('setNumDisease',5)
          }
        })
      }

    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  //部位联动选择器
  const pos1Change = value => {
    console.log(value);

    setPosFirst(value);
    let posList = partTree.filter(item => item.id == value)[0].children
    setPosList(posList);
    setPosSecond(posList.length > 0 && posList[0].id);
  };

  const pos2Change = value => {
    setPosSecond(value);
  }
  //科室联动选择器
  const dep1Change = value => {
    // console.log(value);
    setDepFirst(value);
    let depList = departmentTree.filter(item => item.id == value)[0].children
    setDepList(depList);
    setDepSecond(depList.length > 0 && depList[0].id);
  };

  const dep2Change = value => {
    setDepSecond(value);
  }
  //上传文件
  const props1 = {
    name: 'file',
    action: '/api/upload',
    headers:{
      token:sessionStorage.getItem('token')
    },
    onChange(info) {
      // console.log(info);
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        console.log(info.file.response);
        let { fileName } = info.file.response
        setImgUrl(fileName)
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };
  return (
    <div >
      <Form
        name="basic"
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 16 }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        initialValues={{status:1}}
      >
        <Form.Item
          label="疾病名称"
          name="disName"
          rules={[{ required: true, message: '请输入疾病名称' }]}
        >
          <Input />
        </Form.Item>

        {/* 部位联动选择器 */}
        <Form.Item
          label="选择部位分类"
        >
          <Select value={posFirst} style={{ width: 120, marginRight: 20 }} onChange={pos1Change}>
            {partTree.map(item => (
              <Option key={item.id} value={item.id}>{item.name}</Option>
            ))}
          </Select>
          {posList && <Select style={{ width: 120 }} value={posSecond} onChange={pos2Change}>
            {posList.map(item => (
              <Option key={item.id} value={item.id}>{item.name}</Option>
            ))}
          </Select>}

        </Form.Item>
        {/* 科室联动选择器 */}
        <Form.Item
          label="选择科室分类"
        >
          <Select value={depFirst} style={{ width: 120, marginRight: 20 }} onChange={dep1Change}>
            {departmentTree.map(item => (
              <Option key={item.id} value={item.id}>{item.name}</Option>
            ))}
          </Select>
          {depList && <Select style={{ width: 120 }} value={depSecond} onChange={dep2Change}>
            {depList.map(item => (
              <Option key={item.id} value={item.id}>{item.name}</Option>
            ))}
          </Select>}
        </Form.Item>

        {/* 上传图片 */}
        <Form.Item
          label="上传疾病图片"
        >
          <Upload {...props1}>
            <Button icon={<UploadOutlined />}>上传疾病图片</Button>
          </Upload>
        </Form.Item>
        <Form.Item
          label="疾病简介"
          name="profile"
          rules={[{ required: true, message: '请输入疾病简介' }]}
        >
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item
          label="疾病病因"
          name="etiology"
          rules={[{ required: true, message: '请输入疾病病因' }]}
        >
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item
          label="典型症状"
          name="symptom"
          rules={[{ required: true, message: '请输入典型症状' }]}
        >
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item
          label="疾病预防"
          name="prevention"
          rules={[{ required: true, message: '请输入疾病预防' }]}
        >
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item
          label="小贴士"
          name="tip"
          rules={[{ required: true, message: '请输入小贴士' }]}
        >
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item
          label="状态"
          name="status"
        >
          <Radio.Group  >
            <Radio value={1}>可用</Radio>
            <Radio value={0}>不可用</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 12,
            span: 2,
          }}
        >

          <Button type="primary" htmlType='submit' size='large' icon={<CheckOutlined />}>
            提交
          </Button>
        </Form.Item>

      </Form>

    </div>
  );
}

export default connect(
  state => ({ types: state.types }),
  {delTab,changeActive}
)(Adddisease);
